<template>
  <div class="app-container">
    <!-- 添加或修改优惠政策对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
      <el-divider content-position="left">政策信息</el-divider>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px" class="policy-class">
        <el-row :gutter="20">
          <el-col :span="8" :xs="24">
            <el-form-item label="政策名称" prop="favouredPolicyName">
              <el-input v-model="form.favouredPolicyName" placeholder="请输入政策名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="所属小区" prop="communityId">
              <treeselect v-model="form.communityId" @click="changeCommunity" :options="deptOptions" :normalizer="normalizer" :disable-branch-nodes="true" placeholder="选择所属小区" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="适用标准" prop="normIds">
              <el-select
                @change="changeNormIds"
                v-model="form.normIds"
                multiple
                collapse-tags
                placeholder="请选择">
                <el-option
                  v-for="item in listNormOptions"
                  :key="item.normId"
                  :label="item.normNames"
                  :value="item.normId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="政策生效时间" prop="beginTime">
              <el-date-picker clearable size="small"
                              v-model="form.beginTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择政策生效时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="政策失效时间" prop="finishTime">
              <el-date-picker clearable size="small"
                              v-model="form.finishTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择政策失效时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="优惠方式" prop="preferentialMethod">
              <el-select v-model="form.preferentialMethod" @change="changePreferentialMethod" placeholder="请选择优惠方式">
                <el-option
                  v-for="dict in preferentialMethodOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--<el-col :span="8" :xs="24" v-if="form.preferentialMethod=='zk'">-->
            <!--<el-form-item label="折后抹零" prop="wipeOff">-->
              <!--<el-select v-model="form.wipeOff" placeholder="请选择折后抹零">-->
                <!--<el-option-->
                  <!--v-for="dict in wipeOffOptions"-->
                  <!--:key="dict.dictValue"-->
                  <!--:label="dict.dictLabel"-->
                  <!--:value="dict.dictValue"-->
                <!--&gt;</el-option>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
          <el-col :span="8" :xs="24" v-if="form.preferentialMethod=='jm'||form.preferentialMethod=='zs'">
            <el-form-item label="优惠类型" prop="preferentialType">
              <el-select v-model="form.preferentialType" placeholder="请选择优惠类型">
                <el-option
                  v-for="dict in preferentialTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24" v-if="form.preferentialMethod=='rm'||form.preferentialMethod=='jm'">
            <el-form-item label="分摊方式" prop="sharingMethod">
              <el-select v-model="form.sharingMethod" placeholder="请选择分摊方式">
                <el-option
                  v-for="dict in sharingMethodOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                  v-if="!(dict.dictValue==='ayjt' && form.reliefMethod==='jmydfy')"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24"v-if="form.preferentialMethod=='jm' || form.preferentialMethod=='djyh'">
            <el-form-item label="此政策适用于">
              <el-checkbox-group v-model="form.systemType">
                <el-checkbox
                  v-for="dict in systemTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue">
                  {{dict.dictLabel}}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="16" :xs="24">
            <el-form-item label="政策简介" prop="synopsis">
              <el-input v-model="form.synopsis" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">政策设置</el-divider>
        <el-row :gutter="20">
          <el-col :span="24" :xs="24" v-if="form.preferentialMethod=='zk'">
            <el-form-item label="折扣方式">
              <el-radio-group v-model="form.discountMethod">
                <el-radio
                  v-for="dict in discountMethodOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" :xs="24" v-if="form.preferentialMethod=='jm'">
            <el-form-item label="减免方式">
              <el-radio-group v-model="form.reliefMethod">
                <el-radio
                  v-for="dict in reliefMethodOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" :xs="24" v-if="form.preferentialMethod=='zs'">
            <el-form-item label="赠送方式">
              <el-radio-group v-model="form.largessMethod">
                <el-radio
                  v-for="dict in largessMethodOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <template v-for="(item,index) in form.favouredConfs">
          <div style="margin-top: 15px;margin-bottom: 15px; border-bottom: solid 1px #cccccc;"></div>
          <el-row :gutter="20" v-if="form.preferentialMethod=='zk'">
            <el-col :span="24" :xs="24">
              <div class="cnf-main">
                <el-select v-model="item.postId" placeholder="请选择角色" clearable size="small">
                  <el-option
                    v-for="dict in listRoleOptions"
                    :key="dict.roleKey"
                    :label="dict.roleName"
                    :value="dict.roleKey"
                  />
                </el-select>
                <template v-if="form.discountMethod=='kdzk'">
                  角色   可以打
                  <el-input v-model="item.depositRate" />
                  折
                </template>
                <template v-if="form.discountMethod=='zdzk'">
                  角色   最低可以打
                  <el-input v-model="item.depositRate" />
                  折
                </template>
                <span style="margin-left: 10px;">
                  <el-button type="primary" icon="el-icon-plus" circle @click="policyPlus(item,index)"></el-button>
                  <el-button type="danger" icon="el-icon-minus" circle v-if="index != 0" @click="policyMinus(item,index)"></el-button>
                </span>
              </div>
            </el-col>
        </el-row>
          <el-row :gutter="20" v-if="form.preferentialMethod=='rm'">
            <el-col :span="24" :xs="24">
              <div class="cnf-main">
                <el-select v-model="item.postId" placeholder="请选择岗位" clearable size="small">
                  <el-option
                    v-for="dict in listRoleOptions"
                    :key="dict.roleKey"
                    :label="dict.roleName"
                    :value="dict.roleKey"
                  />
                </el-select>
                岗位 可以抹掉
                <el-input v-model="item.money" />
                元
                <span style="margin-left: 10px;">
                  <el-button type="primary" icon="el-icon-plus" circle @click="policyPlus(item,index)"></el-button>
                  <el-button type="danger" icon="el-icon-minus" circle v-if="index != 0" @click="policyMinus(item,index)"></el-button>
                </span>
              </div>
            </el-col>
          </el-row>
          <!--减免-->
          <el-row :gutter="20" v-if="form.preferentialMethod=='jm' && (form.preferentialType=='mj' || form.preferentialType=='qjj')">
            <el-col :span="24" :xs="24">
              <div class="cnf-main">
                <template v-if="form.preferentialType=='mj'">
                  缴满
                  <el-input style="width: 150px;" v-model="item.mature"/>
                  个月的
                  <el-select v-model="item.normCn" placeholder="请选择收费标准">
                    <el-option
                      v-for="item in listNormOptions"
                      :key="item.normId"
                      :label="item.normNames"
                      :value="item.normId">
                    </el-option>
                  </el-select>
                </template>
                <template v-if="form.preferentialType=='qjj'">
                  缴
                  <el-date-picker
                    v-model="item.regionMonth"
                    type="monthrange"
                    value-format="yyyy-MM"
                    range-separator="至"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份">
                  </el-date-picker>
                  的
                  <el-select v-model="item.normCn" placeholder="请选择收费标准">
                    <el-option
                      v-for="item in listNormOptions"
                      :key="item.normId"
                      :label="item.normNames"
                      :value="item.normId">
                    </el-option>
                  </el-select>
                </template>
                减
                <template v-if="form.reliefMethod=='jmgdje'">
                  <el-input style="width: 150px;" v-model="item.money"/>
                  元
                </template>
                <template v-if="form.reliefMethod=='jmydfy'">
                  <el-input style="width: 150px;" v-model="item.derateMonth"/>
                  个月
                </template>
                <el-select v-model="item.normApply" placeholder="请选择收费标准">
                  <el-option
                    v-for="item in listNormOptions"
                    :key="item.normId"
                    :label="item.normNames"
                    :value="item.normId">
                  </el-option>
                </el-select>
                <span style="margin-left: 10px;">
                  <el-button type="primary" icon="el-icon-plus" circle @click="policyPlus(item,index)"></el-button>
                  <el-button type="danger" icon="el-icon-minus" circle v-if="index != 0" @click="policyMinus(item,index)"></el-button>
                </span>
              </div>
            </el-col>
          </el-row>

            <!--赠送-->
            <el-row :gutter="20" v-if="form.preferentialMethod=='zs' && (form.preferentialType=='mj' || form.preferentialType=='qjj')">
              <el-col :span="24" :xs="24">
                <div class="cnf-main">
                  <template v-if="form.preferentialType=='mj'">
                    缴满
                    <el-input style="width: 150px;" v-model="item.mature"/>
                    个月的
                    <el-select v-model="item.normCn" placeholder="请选择收费标准">
                      <el-option
                        v-for="item in listNormOptions"
                        :key="item.normId"
                        :label="item.normNames"
                        :value="item.normId">
                      </el-option>
                    </el-select>
                  </template>
                  <template v-if="form.preferentialType=='qjj'">
                    缴
                    <el-date-picker
                      v-model="item.regionMonth"
                      type="monthrange"
                      value-format="yyyy-MM"
                      range-separator="至"
                      start-placeholder="开始月份"
                      end-placeholder="结束月份">
                    </el-date-picker>
                    的
                    <el-select v-model="item.normCn" placeholder="请选择收费标准">
                      <el-option
                        v-for="item in listNormOptions"
                        :key="item.normId"
                        :label="item.normNames"
                        :value="item.normId">
                      </el-option>
                    </el-select>
                  </template>
                  赠
                  <template v-if="form.largessMethod=='zswp'">
                    <el-input style="width: 150px;" v-model="item.goods"/>
                    物品
                    <el-input style="width: 150px;" v-model="item.quantity"/>
                    个
                  </template>
                  <template v-if="form.largessMethod=='zsyhj'">
                    <el-input style="width: 150px;" v-model="item.discountVolume"/>
                    元优惠卷
                    <br/>
                    <div style="height: 10px;"></div>
                    优惠卷冲抵
                    <el-select v-model="item.normApply" placeholder="请选择收费标准">
                      <el-option
                        v-for="item in listNormOptions"
                        :key="item.normId"
                        :label="item.normNames"
                        :value="item.normId">
                      </el-option>
                    </el-select>
                    优惠卷有效期
                    <el-date-picker
                      v-model="item.volumeDate"
                      type="daterange"
                      value-format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                  </template>
                  <span style="margin-left: 10px;">
                    <el-button type="primary" icon="el-icon-plus" circle @click="policyPlus(item,index)"></el-button>
                    <el-button type="danger" icon="el-icon-minus" circle v-if="index != 0" @click="policyMinus(item,index)"></el-button>
                  </span>
                </div>
              </el-col>
            </el-row>

          <!--单价优惠-->
          <el-row :gutter="20" v-if="form.preferentialMethod=='djyh'">
            <el-col :span="24" :xs="24">
              <div class="cnf-main">
                  缴
                  <el-date-picker
                    v-model="item.regionMonth"
                    type="monthrange"
                    range-separator="至"
                    value-format="yyyy-MM"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份">
                  </el-date-picker>
                  的
                  <el-select v-model="item.normCn" placeholder="请选择收费标准">
                    <el-option
                      v-for="item in listNormOptions"
                      :key="item.normId"
                      :label="item.normNames"
                      :value="item.normId">
                    </el-option>
                  </el-select>
                  单价优惠
                  <el-input style="width: 150px;" v-model="item.money"/>
                  元
                <span style="margin-left: 10px;">
                  <el-button type="primary" icon="el-icon-plus" circle @click="policyPlus(item,index)"></el-button>
                  <el-button type="danger" icon="el-icon-minus" circle v-if="index != 0" @click="policyMinus(item,index)"></el-button>
                </span>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('101')">保 存</el-button>
        <el-button type="primary" @click="submitForm('102')">保存并启用</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getFavouredPolicy, addFavouredPolicy, updateFavouredPolicy } from "@/api/payfee/favouredPolicy";
  import { listNorm } from '@/api/payfee/norm';
  import { policyMinxin } from "./policyMinxin.js";
  import { orgTreeSelect } from '@/api/system/dept';
  import { listRole } from "@/api/system/role";

  export default {
    name: "FavouredPolicyForm",
    mixins: [ policyMinxin ],
    data() {
      return {
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          favouredPolicyName: [
            { required: true, message: "政策名称不能为空", trigger: "blur" }
          ],
          communityId: [
            { required: true, message: "所属小区不能为空", trigger: "blur" }
          ],
          normIds: [
            { required: true, message: "适用标准不能为空", trigger: "blur" }
          ],
          beginTime: [
            { required: true, message: "政策开始时间不能为空", trigger: "blur" }
          ],
          finishTime: [
            { required: true, message: "政策失效时间不能为空", trigger: "blur" }
          ],
          preferentialMethod:[
            { required: true, message: "优惠方式不能为空", trigger: "blur" }
          ],
          sharingMethod:[
            { required: true, message: "分摊方式不能为空", trigger: "blur" }
          ],
          preferentialType:[
            { required: true, message: "优惠类型不能为空", trigger: "blur" }
          ]
        },
        //收费标准字典
        listNormOptions:[],
        //组织机构字典
        deptOptions:[],
        currentNode:null,
        //角色字典
        listRoleOptions:[]
      };
    },
    created() {
      this.getDeptList();
      this.getListRole();
    },
    methods: {
      show(options){
        this.reset()
        this.currentNode = options.currentNode
        if(options.type=='ADD'){
          this.form.communityId = this.currentNode.id
          this.getListNorm(this.form.communityId);
          this.title='添加优惠政策'
        }else if(options.type=='UPDATE'){
          getFavouredPolicy(options.favouredPolicyId).then(response => {
            let form = response.data;
            if(form.systemType){
              form.systemType = form.systemType.split(",");
            }
            this.getListNorm(form.communityId);
            let normIds = [];
            for(let i in form.favouredNorms){
              let norm = form.favouredNorms[i];
              normIds.push(norm.normId)
            }
            form.normIds = []
            form.normIds = normIds
            for(let i in form.favouredConfs){
              let confs = form.favouredConfs[i];
              if(confs.beginMonth && confs.finishMonth){
                confs['regionMonth'] = []
                confs.regionMonth.push(confs.beginMonth)
                confs.regionMonth.push(confs.finishMonth)
              }
              if(confs.beginTime && confs.finishTime){
                confs['volumeDate'] = []
                confs.volumeDate.push(confs.beginTime)
                confs.volumeDate.push(confs.finishTime)
              }
            }
            this.form = form
            this.title = "编辑优惠政策";
          });
        }
        setTimeout(()=>{   //设置延迟执行
          this.open = true;
        },500);
      },
      getListNorm(communityId){
        listNorm({deptId:communityId||-1}).then(res=>{
          this.listNormOptions = res.rows
        })
      },
      getListRole(){
        listRole().then(res=>{
          this.listRoleOptions = res.rows
        })
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          favouredPolicyId: null,
          favouredPolicyName: null,
          communityId: null,
          beginTime: null,
          finishTime: null,
          preferentialMethod: null,
          wipeOff: '101',
          sharingMethod: null,
          preferentialType: 'mj',
          discountMethod: "kdzk",
          reliefMethod: "jmgdje",
          largessMethod: "zswp",
          synopsis: null,
          systemType: ['pc'],
          status: null,
          normIds:null,
          favouredConfs:[
            this.getFavouredConf()
          ],
          favouredNorms:[]
        };
        this.resetForm("form");
      },
      getFavouredConf(){
        return {
          favouredConfId: null,
          favouredPolicyId: null,
          normCn: null,
          normApply: null,
          postId: null,
          derateMonth: null,
          depositRate: null,
          money: null,
          mature: null,
          goods: null,
          beginMonth: null,
          finishMonth: null,
          discountVolume: null,
          beginTime: null,
          finishTime: null,
          quantity:null,
          regionMonth:null,
          volumeDate:null
        }
      },
      /** 提交按钮 */
      submitForm(status) {
        this.form.status = status
        this.form.favouredNorms = [];
        this.$refs["form"].validate(valid => {
          if (valid) {
            let FLAG = this.checkConf();
            if(FLAG){
              for(let i in this.form.normIds){
                let id = this.form.normIds[i]
                this.form.favouredNorms.push({
                  normId:id
                })
              }
              if(this.form.systemType){
                this.form.systemType = this.form.systemType.join(",");
              }
              if (this.form.favouredPolicyId != null) {
                updateFavouredPolicy(this.form).then(response => {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.$emit("ok")
                });
              } else {
                addFavouredPolicy(this.form).then(response => {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.$emit("ok")
                });
              }
            }
          }
        });
      },
      checkConf(){
        let FLAG = true;
        let favouredConfs = this.form.favouredConfs;
        for(let i in favouredConfs){
          let row = favouredConfs[i];
          if(row.regionMonth &&row.regionMonth.length > 0){
            row.beginMonth = row.regionMonth[0]
            row.finishMonth = row.regionMonth[1]
          }
          if(row.volumeDate &&row.volumeDate.length > 0){
            row.beginTime = row.volumeDate[0]
            row.finishTime = row.volumeDate[1]
          }
          if(this.form.preferentialMethod=='zk' || this.form.preferentialMethod=='rm'){
            if(!row.postId){
              this.msgError(`政策设置第${i+1}条岗位不能为空`);
              FLAG = false;
            }
            if(this.form.preferentialMethod=='rm'){
              if(!row.money){
                this.msgError(`政策设置第${i+1}条减免金额不能为空`);
                FLAG = false;
              }
            }
            if(this.form.preferentialMethod=='zk'){
              if(!row.depositRate && this.form.discountMethod == 'kdzk'){
                this.msgError(`政策设置第${i+1}条折扣不能为空`);
                FLAG = false;
              }
              if(!row.depositRate && this.form.discountMethod == 'zdzk'){
                this.msgError(`政策设置第${i+1}条最低折扣不能为空`);
                FLAG = false;
              }
            }

          }else if(this.form.preferentialMethod=='jm'){
            if(!row.mature && this.form.preferentialType=='mj'){
              this.msgError(`政策设置第${i+1}条缴足月不能为空`);
              FLAG = false;
            }
            if((!row.beginMonth|| !row.finishMonth) && this.form.preferentialType=='qjj'){
              this.msgError(`政策设置第${i+1}条区间月不能为空`);
              FLAG = false;
            }
            if(!row.normCn || !row.normApply){
              this.msgError(`政策设置第${i+1}条收费标准不能为空`);
              FLAG = false;
            }
            if(!row.money && this.form.reliefMethod=='jmgdje'){
              this.msgError(`政策设置第${i+1}条减免金额不能为空`);
              FLAG = false;
            }
            if(!row.derateMonth && this.form.reliefMethod=='jmydfy'){
              this.msgError(`政策设置第${i+1}条减免月不能为空`);
              FLAG = false;
            }
          }else if(this.form.preferentialMethod=='zs'){
            if(!row.mature && this.form.preferentialType=='mj'){
              this.msgError(`政策设置第${i+1}条缴足月不能为空`);
              FLAG = false;
            }
            if((!row.beginMonth|| !row.finishMonth) && this.form.preferentialType=='qjj'){
              this.msgError(`政策设置第${i+1}条区间月不能为空`);
              FLAG = false;
            }
            if(!row.normCn){
              this.msgError(`政策设置第${i+1}条收费标准不能为空`);
              FLAG = false;
            }
            if(this.form.largessMethod=='zswp'){
              if(!row.quantity){
                this.msgError(`政策设置第${i+1}条数量不能为空`);
                FLAG = false;
              }
              if(!row.goods){
                this.msgError(`政策设置第${i+1}条物品不能为空`);
                FLAG = false;
              }
            }
            if(this.form.largessMethod=='zsyhj'){
              if(!row.normApply){
                this.msgError(`政策设置第${i+1}条收费标准不能为空`);
                FLAG = false;
              }
              if(!row.discountVolume){
                this.msgError(`政策设置第${i+1}条优惠卷不能为空`);
                FLAG = false;
              }
              if(!row.beginTime || !row.finishTime){
                this.msgError(`政策设置第${i+1}条优惠卷有效时间不能为空`);
                FLAG = false;
              }
            }
          }else if(this.form.preferentialMethod=='djyh'){
            if(!row.beginMonth|| !row.finishMonth){
              this.msgError(`政策设置第${i+1}条区间月不能为空`);
              FLAG = false;
            }
            if(!row.normCn){
              this.msgError(`政策设置第${i+1}条收费标准不能为空`);
              FLAG = false;
            }
            if(!row.money){
              this.msgError(`政策设置第${i+1}条减免金额不能为空`);
              FLAG = false;
            }
          }
          return FLAG;
        }
      },
      getDeptList() {
        orgTreeSelect({modelType:"'dept','community'"}).then(response => {
          this.deptOptions = response.data;
        });
      },
      /** 转换部门数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.label,
          children: node.children
        };
      },
      //监听小区改变状态
      changeCommunity(v){
        this.getListNorm();
        this.form.normIds = [];
      },
      policyPlus(row,index){
        this.form.favouredConfs.push(this.getFavouredConf())
      },
      policyMinus(row,index){
        this.form.favouredConfs.splice(index,1)
      },
      changePreferentialMethod(v){
        this.form.favouredConfs = [];
        this.form.favouredConfs.push(this.getFavouredConf())
      },
      changeNormIds(v){

      }
    }
  };
</script>
<style lang="scss" scoped>
  .policy-class{
    .el-row{
      display:flex;
      flex-wrap: wrap;
    }
    .cnf-main{
      margin-left: 30px;
      .el-input{
        width: 150px;
      }
      .el-select{
        width: 150px;
      }
    }
  }

</style>
